import React, { Component } from 'react'
import './detail.css'
import { connect} from "react-redux";
import actionCreator from "../shouye/actionCreator";
export default class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lis: ['商品', '详情', '参数', '推荐'],
            id: this.props.location.state.id
        }
        this.back = this.back.bind(this)

    }
    componentDidMount() {
        this.props.getDate()
    }
    // 点击时改变样式，并且跳到相应的位置
    change() {
    }
    back() {
        // console.log(this.props)
        this.props.history.goBack()
    }
    render() {
        let { lis ,id} = this.state
        const {dataList} = this.props.shouye
        console.log(dataList)
        const prodData = dataList.find((data) => data.id === id)
        console.log((prodData || {}).name)
        localStorage.setItem("prodData", JSON.stringify(prodData))
        return (
            <div className='detail'>
                <div className="header">
                    <span className='back' onClick={this.back}><i className="iconfont icon-arr-right"></i>返回</span>
                    <h4> 地平线 8 号商务旅行箱 </h4>
                </div>
                <div className='main'>
                    <ul className='nav'>
                        {/* <li className='active'>商品</li>
                <li>详情</li>
                <li>参数</li>
                <li>推荐</li> */}
                        {
                            lis.map((item, index) => {
                                return <li key={index} onClick={this.change.bind(this, index)}
                                >
                                    {item}
                                </li>
                            })
                        }
                    </ul>
                    <div className='banner'></div>
                </div>
            </div>
        )
    }
}


export default connect((state) => state, actionCreator)(Detail);
